<template>
  <div class="login_wrap">
     <bgCanvas />
     <div class="form_wrap">
      <h1 style="color:white;text-align: center; margin-bottom: 20px;">进思管理系统 </h1>
          <el-form
              ref="loginForm"
              :model="formState"
              label-width="120px"
              class="demo-dynamic"
            >
              <el-form-item
                prop="userName"
                label="用户名"
                :rules="[
                  {
                    required: true,
                    message: '用户名必填',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-input v-model="formState.userName" />
              </el-form-item>
             
              <el-form-item label="密码"
                prop="password"
                :rules="[
                  {
                    required: true,
                    message: '密码名必填',
                    trigger: 'blur',
                  },
                ]">
                <el-input v-model="formState.password"></el-input>
              </el-form-item>
              <el-form-item label="验证码"
               prop="veriCode"
                :rules="[
                  {
                    required: true,
                    message: '验证码必填',
                    trigger: 'blur',
                  },
                ]">
                <div style="width:800px;display: flex; ">
                    <div  style="width:500px;">
                      <el-input  v-model="formState.veriCode" />
                    </div>
                      <veriCom /> 
                  </div>
              </el-form-item>
              <el-form-item >
                <div style=" width:800px;display: flex; justify-content: space-between;">
                  <el-button type="primary">忘记密码</el-button>
                
                  <el-button type="success" @click="toLogin(loginForm)">登录</el-button>
                </div>
              </el-form-item>
            </el-form>
     </div>
  </div>  
</template>

<script setup lang="ts">
    import bgCanvas from './bgCanvas.vue'
    import veriCom from './veri.vue'
    import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { loginApi,checkVeriApi } from '../../api/user';
import {ElMessage } from 'element-plus'
import {useRouter} from 'vue-router'
import {tokenStore} from '../../store/index'

  // 获取表单组件
    const loginForm = ref<FormInstance>()
  let router=useRouter()
  let store:any=tokenStore()
  console.log(store,"&&&&&&&&&")
    const formState = reactive<{
      userName: string
      password: string,
      veriCode:string
    }>({
      userName:"",
      password:"",
      veriCode:""
    })


// 点击登录按钮 调用的方法
const toLogin = (formEl:any ) => {
  if(!formEl) return false
      console.log(1111)
  // 表单验证
  formEl.validate(async (valid:any) => {
      if (valid) {//通过
        // 调用校验验证码接口
          let res:any=await checkVeriApi(formState.veriCode)
          console.log(res,"00000000000")
          if(res.success){
              // 登录接口的调用
              let loginRes:any=await loginApi({
                userName:formState.userName,
                password:formState.password
              })
              console.log(loginRes,"888888888888888")
              if(loginRes.success){
                  // 登录成功
                      ElMessage({
                      type:"success",
                      message:"登录成功"
                    })
                    // 把后台返回的 tokenId 存储到pinia
                      // store.changeToken(loginRes.tokenId)
                      router.replace("/layout/home")
              }else{
                // 后台返回的提示
                  ElMessage({
                  type:"error",
                  message:loginRes.err
                })
              }
          }else{
            ElMessage({
              type:"error",
              message:"验证码错误"
            })
          }
      } else {//未通过
        console.log('error submit!')
        return false
      }
    })
    // 表单的重置方法
    // formEl.resetFields()
}


</script>
<style lang="less" scoped>
 .login_wrap{
  width:100%;
  height:100vh;
  background:rgba(12,24,84);
  position:relative;

 }
 .form_wrap{
  width:800px;
  height:500px;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
 }
 .el-input{
  height: 50px;
 }
</style>